<template>
    <view class="skeleton-item" v-if="isShowSkeleton">
        <uv-skeletons :loading="isShowSkeleton" :skeleton="skeleton"></uv-skeletons>
    </view>
</template>

<script setup lang="ts">
import { reactive } from "vue"
defineProps({
	isShowSkeleton: {
		type: true,
		default: false
	}
})

const skeleton = reactive([
    {
        type: 'custom',
        num: 1,
        style: 'width: 300rpx;height: 320rpx;margin: 0 auto;',
    },
    10,
    {
        type: 'custom',
        num: 1,
        style: 'margin-top: 10rpx;height: 80rpx;',
    },
    10,
    {
        type: 'flex',
        num: 1,
        style: 'margin-top: 10rpx;justify-content: space-between;align-items: center;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 140rpx;height:60rpx;'
            },
            {
                type: 'line',
                num: 1,
                style: 'width: 120rpx;height:40rpx;marginLeft: 65rpx;'
            }
        ]
    },
    20,
    {
        type: 'flex',
        num: 1,
        style: 'justify-content: flex-end',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 140rpx;height:35rpx;'
            }
        ]
    },
])
</script>

<style class="scss">
.skeleton-item {
    width: 345rpx;
    padding: 20rpx 10rpx;
    margin: 20rpx 10rpx 0 10rpx;
    background-color: #fff;
    border-radius: 8rpx;
}
</style>